import React, { Component } from 'react';
import './index.less';
import { Button, Table, Breadcrumb } from 'tinper-bee';
import App from 'layout/App.js'
import { vendorsGetUrlParam, vendorsSetUrl } from 'utils/config.js';
import { getBillDetainReportData }  from './billdetailreport.config';
export default class ShowTemplate extends Component {
    constructor(props) {
        super(props);
        let _self = this;
        this.state = {
            activityName:'',
            billCount:0,
            showBreadcrumb:2,
            data : [],
            columns : [
                {title: "人员名称", dataIndex: "memberName", key: "memberName", width: '10%'},
                {title: "制单总数", dataIndex: "billCount", key: "billCount", width: '10%'},
                {title: "参与项目名称", dataIndex: "projectCounts", key: "projectCounts", width: '40%',
                    render(text, rec, index) {
                        text = text?text:[];
                        return (
                            <div>
                                {
                                    _self.setProjectChildrenName(text)
                                }
                            </div>
                        )
                    }
                },
                {title: "参与项目制单数量", dataIndex: "kProjectCounts", key: "kProjectCounts", width: '40%',
                    render(text, rec, index) {
                        text = text?text:[];
                        return (
                            <div>
                                {
                                    _self.setProjectChildrenBillCount(text)
                                }
                            </div>
                        )
                    }
                },
            ]
        };
    }

    componentDidMount() {
        let params =JSON.parse(sessionStorage.getItem('fromGroupData'));
        this.setState({
            activityName:params.activityName,
            billCount:params.billCount,
            showBreadcrumb:params.showBreadcrumb
        });
        params={
            orgId:params["pk_org"],
            entId: params["ent_id"],
            timeStart:params["start_time"],
            timeEnd:params["end_time"],
            start:0,
            limit:1000
        };
        this.handleGetBillReportData(params)
    }
    changeData =(data)=>{
        for (let i = 0; i < data.length; i++) {
            let item = data[i];
            item = {...item,kProjectCounts:item.projectCounts};
            data.splice(i,1,item)
        }
        this.setState({
            data
        })
    }
    handleGetBillReportData=(params)=>{
        getBillDetainReportData(params).then((res)=>{
            let data=res.data;
            if (data.resultCode !=='busi_ex'){
                data = data.result;
                data=data&&data.length?data:[];
                this.changeData(data);
            } else {
                danger({'text':data.exMsg})
            }
        })
    }
    setProjectChildrenName =(projectArr)=>{
        return projectArr.map((item)=> {
            return <span style={{width:'100%',display:'block'}}>{item.projectName}</span>
        })
    };
    setProjectChildrenBillCount =(projectArr)=>{
        return projectArr.map((item)=> {
            return <span style={{width:'100%%',display:'block'}}>{item.billCount}</span>
        })
    };
    setRowKey =(record,index)=>{
        return index
    };
    render() {
        let {activityName, billCount} =this.state;
        return (
            <App>
                <div className="bill-report-container">
                    <div className="brc-nav">
                        <Breadcrumb>
                            {this.state.showBreadcrumb == 3?<Breadcrumb.Item href={"/groupquery.html?page_state=1"}>
                                集团查看
                            </Breadcrumb.Item>:null}
                            <Breadcrumb.Item href={"/dataanalysis.html?page_state=1"}>
                                企业看板
                            </Breadcrumb.Item>
                            <Breadcrumb.Item active>
                                人员制单统计
                            </Breadcrumb.Item>
                        </Breadcrumb>
                    </div>
                    <div className="brc-content">
                        <div className="brc-content-header clearfix">
                            <div className="brc-content-header-title">
                                {activityName}
                            </div>
                            <div className="brc-report-total clearfix">
                                <div className="brc-report-bill-total">
                                    <span>单据总数:&nbsp;</span>
                                    <span>{`${billCount}张`}</span>
                                </div>
                            </div>
                        </div>
                        <div className="brc-content-table">
                            <Table
                                scroll={{y: 384}}
                                rowKey={this.setRowKey}
                                columns={this.state.columns}
                                emptyText={()=>'暂无数据'}
                                data={this.state.data}/>
                        </div>
                    </div>
                </div>
            </App>
        );
    }
};